<!-- 分组 -->
<template>
  <main class="page-main">
    <div class="my-title">系统概览</div>
    <a-row :gutter="16" class="text-center">
      <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-if="info.os" class="margin-top-10">
        <a-card title="服务器信息" size="small" hoverable>
          <a-row class="line my-item">
            <a-col :span="12">操作系统：</a-col>
            <a-col :span="12">{{info.os.name}}</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">版本号：</a-col>
            <a-col :span="12">{{info.os.version}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="12">系统架构：</a-col>
            <a-col :span="12">{{info.os.arch}}</a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-if="info.cpu" class="margin-top-10">
          <a-card title="CPU" size="small" hoverable>
            <div class="text-center margin-bottom-20">
              <a-progress type="dashboard" :percent="info.cpu.systemCpuLoad" />
              <div>CPU使用率</div>
            </div>
            <a-row class="line my-item">
              <a-col :span="16">逻辑核心数：</a-col>
              <a-col :span="8">{{info.cpu.cpuProcessors}}</a-col>
            </a-row>
            <a-row class="line my-item">
              <a-col :span="16">当前使用率：</a-col>
              <a-col :span="8">{{info.cpu.processCpuLoad}}%</a-col>
            </a-row>
            <a-row>
              <a-col :span="16">系统使用率：</a-col>
              <a-col :span="8">{{info.cpu.systemCpuLoad}}%</a-col>
            </a-row>
          </a-card>
        </a-col>

      <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="margin-top-10">
        <a-card title="内存" size="small" hoverable>
          <div class="text-center margin-bottom-20">
            <a-progress type="dashboard" :percent="info.memory.memoryLoad" />
            <div>内存使用率</div>
          </div>
          <a-row class="line my-item">
            <a-col :span="12">总内存：</a-col>
            <a-col :span="12">{{info.memory.totalMemory}}GB</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">已用内存：</a-col>
            <a-col :span="12">{{info.memory.usedMemory}}GB</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">可用内存：</a-col>
            <a-col :span="12">{{info.memory.freeMemory}}GB</a-col>
          </a-row>
          <a-row>
            <a-col :span="12">使用率：</a-col>
            <a-col :span="12">{{info.memory.memoryLoad}}%</a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="margin-top-10">
        <a-card title="虚拟内存" v-if="info.memory.totalVirtualMemory" size="small" hoverable>
          <div class="text-center margin-bottom-20">
            <a-progress type="dashboard" :percent="info.memory.virtualMemoryLoad" />
            <div>虚拟内存使用率</div>
          </div>
          <a-row class="line my-item">
            <a-col :span="12">总容量：</a-col>
            <a-col :span="12">{{info.memory.totalVirtualMemory}}GB</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">已用容量：</a-col>
            <a-col :span="12">{{info.memory.usedVirtualMemory}}GB</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">剩余容量：</a-col>
            <a-col :span="12">{{info.memory.freeVirtualMemory}}GB</a-col>
          </a-row>
          <a-row>
            <a-col :span="12">使用率：</a-col>
            <a-col :span="12">{{info.memory.virtualMemoryLoad}}%</a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4"  class="margin-top-10" v-for="disk in info.disks">
        <a-card :title="'磁盘【'+disk.name+'】'" size="small" hoverable>
          <div class="text-center margin-bottom-20">
            <a-progress type="dashboard" :percent="disk.load" />
            <div>磁盘【{{disk.name}}】使用率</div>
          </div>
          <a-row class="line my-item">
            <a-col :span="12">总容量：</a-col>
            <a-col :span="12">{{disk.totalSpace}}GB</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">已用容量：</a-col>
            <a-col :span="12">{{disk.usedSpace}}GB</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">可用容量：</a-col>
            <a-col :span="12">{{disk.freeSpace}}GB</a-col>
          </a-row>
          <a-row>
            <a-col :span="12">使用率：</a-col>
            <a-col :span="12">{{disk.load}}%</a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <div class="my-title">JVM监控</div>
    <a-row :gutter="16">
      <a-col :span="6" class="margin-top-10">
        <a-card title="JVM" v-if="info.jvm" size="small" hoverable>
          <a-row class="line my-item">
            <a-col :span="8">JVM名称：</a-col>
            <a-col :span="16">{{info.jvm.name}}</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="8">JVM版本：</a-col>
            <a-col :span="16">{{info.jvm.version}}</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="8">启动时间：</a-col>
            <a-col :span="16">{{info.jvm.startTime}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="8">运行时长：</a-col>
            <a-col :span="16">{{info.jvm.runTimeStr}}</a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col :span="6" class="margin-top-10">
        <a-card title="JVM内存" v-if="info.jvmMemory" size="small" hoverable>
          <a-row class="line my-item">
            <a-col :span="12">最大堆内存：</a-col>
            <a-col :span="12">{{info.jvmMemory.maxHeapMemory}}MB</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">已用堆内存：</a-col>
            <a-col :span="12">{{info.jvmMemory.usedHeapMemory}}MB</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">可用堆内存：</a-col>
            <a-col :span="12">{{info.jvmMemory.freeHeapMemory}}MB</a-col>
          </a-row>
          <a-row>
            <a-col :span="12">使用率：</a-col>
            <a-col :span="12">{{info.jvmMemory.heapMemoryLoad}}%</a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col :span="6" class="margin-top-10">
        <a-card title="JVM线程" v-if="info.jvmThread" size="small" hoverable>
          <a-row class="line my-item">
            <a-col :span="12">活动线程数：</a-col>
            <a-col :span="12">{{info.jvmThread.threadCount}}</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">守护线程数：</a-col>
            <a-col :span="12">{{info.jvmThread.daemonThreadCount}}</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">峰值线程数：</a-col>
            <a-col :span="12">{{info.jvmThread.peakThreadCount}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="12">累计创建线程数：</a-col>
            <a-col :span="12">{{info.jvmThread.totalStartedThreadCount}}</a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col :span="6" class="margin-top-10">
        <a-card title="JVM类加载器" v-if="info.jvmClassLoad" size="small" hoverable>
          <a-row class="line my-item">
            <a-col :span="12">类加载次数：</a-col>
            <a-col :span="12">{{info.jvmClassLoad.loadedClassCount}}</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">类卸载次数：</a-col>
            <a-col :span="12">{{info.jvmClassLoad.unloadedClassCount}}</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="12">累计加载次数：</a-col>
            <a-col :span="12">{{info.jvmClassLoad.totalLoadedThreadCount}}</a-col>
          </a-row>
        </a-card>
      </a-col>


      <a-col :span="24">
        <div class="my-sub-title">内存池</div>
      </a-col>

      <a-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8"   class="margin-top-10" v-for="item in info.jvmMemoryPools">
        <a-card :title="'内存池('+item.name+')'" size="small" hoverable>
          <a-row class="line my-item">
            <a-col :span="8">类型：</a-col>
            <a-col :span="16">{{item.type}}</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="8">最大空间：</a-col>
            <a-col :span="16">{{item.maxSpace}}MB</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="8">已用空间：</a-col>
            <a-col :span="16">{{item.usedSpace}}MB</a-col>
          </a-row>

          <a-row>
            <a-col :span="8">管理器：</a-col>
            <a-col :span="16"><a-tag v-for="name in item.managers">{{name}}</a-tag></a-col>
          </a-row>
        </a-card>
      </a-col>


      <a-col :span="24">
        <div class="my-sub-title">GC</div>
      </a-col>
      <a-col :span="12"  class="margin-top-10" v-for="item in info.jvmgcList">
        <a-card :title="'GC('+item.name+')'" size="small" hoverable>
          <a-row class="line my-item">
            <a-col :span="8">回收次数：</a-col>
            <a-col :span="16">{{item.collectionCount}}</a-col>
          </a-row>
          <a-row class="line my-item">
            <a-col :span="8">回收时长：</a-col>
            <a-col :span="16">{{item.collectionTime}}</a-col>
          </a-row>


          <a-row>
            <a-col :span="8">管理的内存池：</a-col>
            <a-col :span="16"><a-tag v-for="name in item.memoryPoolNames">{{name}}</a-tag></a-col>
          </a-row>
        </a-card>
      </a-col>



    </a-row>

  </main>
</template>
<script lang="ts">


import * as apiUtil from "@/api/ApiUtils";
import * as api from "@/api/SysMonitorApi";
import {notification} from 'ant-design-vue';


export default {
  components: {

  },
  data() {
    return {
      info:{
        os:{},
        memory:{},
        cpu:{},
        disks:[],
        jvm:{},
        jvmMemory:{},
        jvmThread:{},
        jvmMemoryPools:[],
        jvmgcList:[],
        jvmClassLoad:{}
      }
    }
  },
  methods: {
  },
  computed: {},
  watch: {},
  mounted() {
    api.getInfo().then((res) => {
      if (apiUtil.isSuccessed(res)) {
        this.info = res.data;
      }
    });
  }
}
</script>
<style scoped>
.my-title{
  font-size: 20px;
  font-weight: bolder;
  margin-bottom: 10px;
  margin-top: 50px;
}
.my-sub-title{
  font-size: 16px;
  font-weight: bolder;
  margin-top: 40px;
}
.my-item{
  padding-bottom: 5px;
  margin-bottom: 5px;
}
</style>